import React, { useEffect, useRef, useState } from 'react';
import { Button, Tag, Space, Card, Empty, Select, Spin } from 'antd';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import DemoLine from './component/LineChart';
import DemoBar from './component/BarChart';
import { useRequest } from 'umi';
import moment from 'moment';

const { Option } = Select;
const { Statistic, Divider } = StatisticCard;

export default (prop: any) => {
  const [tableName, setTableName] = useState('大会报告');
  const [chartData, setChartData] = useState<any>();
  const [lineData, setLineData] = useState<any>();
  const [singleLineData, setSingleLineData] = useState<any>();

  //合作交流
  const getCooperationStatis = useRequest(
    (statisticParam) => {
      return {
        url: `http://10.1.40.84:9998/personBoard/getCooperationStatis?id=${statisticParam.id}&level=${statisticParam.level}`,
        method: 'GET',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      onSuccess: (result) => {
        if (result.code === 200) {
          console.log(result.data.chart);
          setChartData(result.data.chart);
          setLineData(result.data.line);
          setSingleLineData(
            result.data.line.filter((e: any) => e.name === tableName)[0].data,
          );
        }
      },
      formatResult: (res) => res,
    },
  );

  useEffect(() => {
    console.log(prop);
    if (prop.directionId) {
      getCooperationStatis.run({ id: prop.directionId, level: 'direction' });
    }
  }, [prop.directionId]);

  useEffect(() => {
    setSingleLineData(
      lineData?.filter((e: any) => e.name === tableName)[0].data,
    );
  }, [tableName]);

  const handleChange = (value: any) => {
    setTableName(value);
  };

  return (
    <>
      <ProCard title="合作交流概览" split={'vertical'} headerBordered bordered>
        <ProCard split="horizontal" colSpan={24}>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '大会报告',
                value: chartData?.filter((e: any) => e.name === '大会报告')[0]
                  .count,
              }}
            />
            <StatisticCard
              statistic={{
                title: '大会特邀报告',
                value: chartData?.filter(
                  (e: any) => e.name === '大会特邀报告',
                )[0].count,
              }}
            />
            <StatisticCard
              statistic={{
                title: '实验室特邀报告',
                value: chartData?.filter(
                  (e: any) => e.name === '实验室特邀报告',
                )[0].count,
              }}
            />
            <StatisticCard
              statistic={{
                title: '国内外学术交流',
                value: chartData?.filter(
                  (e: any) => e.name === '国内外学术交流',
                )[0].count,
              }}
            />
            <StatisticCard
              statistic={{
                title: '主办承办会议',
                value: chartData?.filter(
                  (e: any) => e.name === '主办承办会议',
                )[0].count,
              }}
            />
          </ProCard>
        </ProCard>
      </ProCard>
      <Divider />

      <ProCard split="vertical">
        <ProCard
          title={'合作交流数量曲线'}
          extra={
            <Space>
              <span>合作交流类别：</span>
              <Select
                defaultValue="大会报告"
                style={{ width: 200 }}
                onSelect={handleChange}
              >
                <Option value="大会报告">大会报告</Option>
                <Option value="大会特邀报告">大会特邀报告</Option>
                <Option value="实验室特邀报告">实验室特邀报告</Option>
                <Option value="国内外学术交流">国内外学术交流</Option>
                <Option value="主办承办会议">主办承办会议</Option>
              </Select>
            </Space>
          }
        >
          <div style={{ height: '300px' }}>
            <DemoLine data={singleLineData} />
          </div>
        </ProCard>
      </ProCard>
      <Divider />
      <Card title={'合作交流数量总览'}>
        <div style={{ paddingLeft: 20, paddingRight: 20 }}>
          <DemoBar data={chartData} />
        </div>
      </Card>
      <Divider />
    </>
  );
};
